<script setup lang="ts">
import { reactive } from "vue";
import { systemName } from "@/settings";
import { useRouter } from "vue-router";

defineOptions({
  name: "Home"
});
const router = useRouter();
const goComplaintPage = () => {
  router.push("/complaint");
};
</script>

<template>
  <div
    class="w-full h-60 relative bg-[url('@/assets/header-bg.png')] bg-cover bg-no-repeat overflow-hidden"
  >
    <div class="absolute left-6 top-16">
      <van-icon name="shield-o" size="30" color="#ff6700" />
    </div>

    <p class="mt-12 text-center font-semibold text-base">{{ systemName }}</p>
    <p
      class="absolute left-0 bottom-8 w-full text-[40px] text-center font-semibold"
    >
      <span
        class="mr-5 bg-gradient-to-r from-[#29c152] to-[#10b9a3] bg-clip-text text-transparent"
        >投诉举报</span
      >
      <span
        class="bg-gradient-to-r from-[#10b9bf] to-[#2ca6ec] bg-clip-text text-transparent"
        >一触即达</span
      >
    </p>
  </div>
  <div class="flex justify-around gap-3 mt-5 px-3">
    <div
      class="relative w-1/2 h-24 shadow-md bg-gradient-to-br from-[#18bc9c] via-[#62d2bc] to-[#eee] rounded-xl"
    >
      <div class="pt-5 pl-4 text-white" @click="goComplaintPage">
        <div class="text-lg font-bold">我要投诉</div>
        <div class="text-sm">举报投诉入口</div>
      </div>
      <div class="absolute right-2 bottom-2 shadow-2xl">
        <van-icon name="notes" size="24" color="#18bc9c" />
      </div>
    </div>
    <div
      class="relative w-1/2 h-24 shadow-md bg-gradient-to-br from-[#0fa0e7] via-[#16a2e7] to-[#eee] rounded-xl"
    >
      <div class="pt-5 pl-4 text-white">
        <div class="text-lg font-bold">查询投诉</div>
        <div class="text-sm">查看处理进度</div>
      </div>
      <div class="absolute right-2 bottom-2 shadow-2xl">
        <van-icon name="user" size="24" color="#0fa0e7" />
      </div>
    </div>
  </div>
  <div
    class="flex justify-center items-center w-full h-14 mx-3 my-5 rounded-full bg-[#b5e9df]"
  >
    <van-icon name="phone" size="24" color="#18bc9c" />
    <span class="font-semibold">举报投诉热线0000-0000000</span>
  </div>
  <div class="mx-2 mt-16 font-semibold">
    <div>
      <van-icon name="fire" color="#2ec1a5" />
      声明
    </div>
    <div class="px-3 text-sm">
      <p>1.本平台将切实保护您的个人隐私，请您放心使用。</p>
      <p>2.我们将在规定时间内处理您的投诉，并及时回复您的处 理结果。</p>
    </div>
  </div>
</template>
